<template>
    <a-layout>
        <a-layout-header></a-layout-header>

        <a-layout>
            <a-layout-sider>
                <a-menu mode="inline">
                    <a-menu-item key="1">
                        <template #icon>
                            <PieChartOutlined />
                        </template>
                        <span>项目架构</span>
                    </a-menu-item>
                    <a-menu-item key="2">
                        <template #icon>
                            <DesktopOutlined />
                        </template>
                        <span>万达集团</span>
                    </a-menu-item>
                    <a-sub-menu key="sub1">
                        <template #icon>
                            <MailOutlined />
                        </template>
                        <template #title>万达实业建筑有限公司</template>
                        <a-menu-item key="5" style="background-color: white; padding: 0; margin: 0"
                            @click="getdata">项目1</a-menu-item>
                        <a-menu-item key="6" style="background-color: white; padding: 0; margin: 0"
                            @click="getadata">项目2</a-menu-item>
                    </a-sub-menu>
                </a-menu>
            </a-layout-sider>

            <a-layout-content style="margin-bottom: 20px">
                <div class="pro">设备列表</div>
                <button class="bbtn" @click="add">新增</button>
                <div class="bot">
                    <div class="b1">
                        <span>搜索</span>
                        <a-input v-model:value="valuec" placeholder="请输入设备名称或编号" />
                    </div>
                    <div class="b2">
                        <span>设备类型</span>
                        <el-select v-model="valuex" class="m-2" size="default" placeholder="--请选择--">
                            <el-option v-for="item in options" :key="item.valuex" :label="item.label"
                                :value="item.valuex" />
                        </el-select>
                    </div>
                    <div class="b3">
                        <span>状态</span>
                        <el-select v-model="valuey" class="m-2" size="default" placeholder="--请选择--">
                            <el-option v-for="item in options1" :key="item.valuey" :label="item.labely"
                                :value="options1.indexOf(item)" />
                        </el-select>
                    </div>

                    <div class="dated">
                        <a-button type="primary" style="background-color: green;color: whitesmoke;border-radius: 14%;"
                            @click="search">搜索</a-button>
                    </div>
                </div>
                <!-- 表格 -->
                <div>
                    <el-table :data="tableData.slice((page - 1) * limit, page * limit)"
                        :header-cell-style="{ backgroundColor: 'rgb(242,242,242)' }" border
                        style="width: 98%;height: 300px; margin:auto;margin-top: 20px;font-size: 12px;color: black;text-align: center;">
                        <el-table-column prop="id" label="序号" width="100" type="index">
                            <template #default="scope">
                                <span>{{ (page - 1) * limit + scope.$index + 1 }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="cnum" label="设备编号" width="100" />
                        <el-table-column prop="equipname" label="设备名称" />
                        <el-table-column prop="equiptype" label="设备类型" width="120" />
                        <el-table-column prop="district" label="绑定分区" width="100" />
                        <el-table-column prop="ip" label="IP地址" />
                        <el-table-column prop="factory" label="设备厂商" width="100" />
                        <el-table-column prop="state" label="状态" width="100">
                            <template #default="scope">
                                <span>{{ scope.row.state == 1 ? "启用" : "禁用" }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button text :disabled="scope.row.state == 2" @click="edit(scope.row.id)">{{
                                    scope.row.operate[0]
                                }}</el-button>

                                <el-button text :disabled="scope.row.state == 2" @click="open(scope.row.id)">{{
                                    scope.row.operate[1]
                                }}</el-button>
                                <el-button text @click="eable(scope.row.state, scope.row.id)">
                                    {{
                                        scope.row.state == 1 ? scope.row.operate[2] = "禁用" : scope.row.operate[2] = "启用"
                                    }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <!-- 分页 -->
                <div class=" dpage">
                    <el-pagination background @current-change="changepage" v-model:current-page="currentpage"
                        layout="prev, pager, next" :total="tableData.length / 2 * 10" />
                </div>

                <eson1 v-if="isshow" @hide="visi" @upmydate="update"></eson1>
                <eson2 v-if="isshow1" @hide="visi1" @upmydate="update" :pro="tid"></eson2>
                <enable v-if="isshow2" @hide="visi2" @upmydate="update" :state="tid1" :id="tid2"></enable>
                <disable v-if="isshow3" @hide="visi3" @upmydate="update" :xstate="tid3" :xid="tid4"></disable>
            </a-layout-content>
        </a-layout>
    </a-layout>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs, watch } from "vue";
import dayjs, { Dayjs } from "dayjs";
import service from "../../utils/service"
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
} from "@ant-design/icons-vue";
import { string } from "vue-types";
import { useRouter } from "vue-router";
import eson1 from "./equipadd.vue"
import eson2 from "./equipedit.vue"
import { ElMessage, ElMessageBox } from 'element-plus'
import enable from "./enable.vue"
import disable from "./disable.vue"
import { number } from "echarts";

const isshow = ref(false)
const visi = () => {
    isshow.value = false
}
const add = () => {
    isshow.value = true
}

// 第二个子组件
const isshow1 = ref(false)
const visi1 = () => {
    isshow1.value = false
}

let tid = ref()
const edit = (cc: any) => {
    isshow1.value = true
    tid = cc
}
// 第三个组件
const isshow2 = ref(false)
const visi2 = () => {
    isshow2.value = false
}

let tid1 = ref()
let tid2 = ref()
let tid3 = ref()
let tid4 = ref()

// 第四个组件
const isshow3 = ref(false)
const visi3 = () => {
    isshow3.value = false
}

const eable = (cc: any, dd: any) => {
    if (cc == 2) {
        isshow2.value = true;
        tid1 = cc
        tid2 = dd
        // console.log(cc, dd);
    } else {
        isshow3.value = true;
        tid3 = cc
        tid4 = dd
    }

}
console.log(tid1, tid2);

const $router = useRouter();

const state = reactive({
    collapsed: false,
    selectedKeys: ["1"],
    openKeys: ["sub1"],
    preOpenKeys: ["sub1"],
});

watch(
    () => state.openKeys,
    (_val, oldVal) => {
        state.preOpenKeys = oldVal;
    }
);
const toggleCollapsed = () => {
    state.collapsed = !state.collapsed;
    state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};


let valuex = ref<string>();
// 项目分类数据
const options = [
    {
        valuex: "--请选择--",
        label: "--请选择--",
    },
    {
        valuex: "灯光设备",
        label: "灯光设备",
    },
    {
        valuex: "卫生间设备",
        label: "卫生间设备",
    },
    {
        valuex: "车行设备",
        label: "车行设备",
    },
];

// 状态数据
let valuey = ref<number>();
const options1 = [
    {
        valuey: "禁用",
        labely: "禁用"
    },
    {
        valuey: "启用",
        labely: "启用"
    }
]

//  表格
interface mytable {
    id: number;
    cnum: string;
    equipname: string;
    district: string;
    ip: string;
    factory: string;
    state: number;
    operate: string[];
}
const tableData = reactive<mytable[]>([])
let count = ref()
const getdata = () => {
    service({
        url: "equipment",
        method: "get"
    }
    ).then((res) => {
        count.value = res.data.length
        tableData.length = 0
        tableData.push(...res.data)

    })
}
getdata();

const getadata = () => {
    service({
        url: "equipmentx",
        method: "get"
    }
    ).then((res) => {
        count.value = res.data.length
        tableData.length = 0
        tableData.push(...res.data)
    })
}

const update = () => {
    getdata();
}

let valuec = ref<string>();

// 搜索

const search = () => {
    service({
        url: "http://localhost:3000/equipment?q=" + valuec.value,
        method: "get",
        params: {
            "equiptype": valuex.value,
            "state": valuey.value
        }
    }).then((res) => {
        valuex.value = undefined,
            valuey.value = undefined,
            valuec.value = '',
            tableData.length = 0,
            tableData.push(...res.data)
    })
}

const limit = ref(2)
// 分页
const page = ref(1)
const currentpage = ref()

const changepage = (value: number) => {
    page.value = value
    currentpage.value = value
    service({
        url: "equipment",
        method: "get",
        params: {
            _page: currentpage.value,
            _limit: 2
        }
    }).then((res) => {
        // tableData.length = 0,
        // tableData.push(...res.data)
    })
}



// 删除
const open = (del: any) => {

    ElMessageBox.confirm(
        '确定要删除该设备吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            service({
                url: "equipment/" + del,
                method: "delete",
            }).then(() => {
                getdata();
            })
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}

// 禁用


</script>

<style scoped>
.ant-layout {
    width: 100%;
    height: 100%;
}

.ant-layout-header {
    width: 100%;
    height: 30px;
    background-color: rgb(246, 247, 249);
}

.ant-layout-sider {
    width: 243px;
    margin-bottom: 20px;
    margin-right: 13px;
    background-color: white;
}

.ant-layout-content {
    background-color: white;
}

.ant-menu {
    height: 100%;
}

.ant-input {
    width: 384px;
}

.ant-space {
    display: flex;
}

.dated {
    display: flex;
}

.sp {
    display: block;
}

.el-select {
    color: red;
    font-size: 12px;
}

.dpage {
    position: fixed;
    margin-top: 20px;
    right: 20px;
}

.el-button {
    width: 30px;
}

.pro {
    font-size: 25px;
    color: gray;
}

.bbtn {
    margin-left: 950px;
    width: 50px;
    height: 30px;
    background-color: green;
    color: azure;
    border-radius: 15%;
}

.ant-input {
    width: 200px;
}

.bot {
    display: flex;
    margin-top: 10px;
}

.bot .b1 {
    width: 25%;
}

.bot .b1 span {
    margin-right: 5px;
}

.bot .b2 {
    width: 30%;
}

.bot .b2 span {
    margin-right: 5px;
}

.bot .b3 {
    width: 25%;
}

.bot .b3 span {
    margin-right: 5px;
}
</style>




